<div class="content-heading">
    <div>
        💻 {{ 'general.clients' | translate }} - <b>{{'general.add' | translate}}</b>
        <small><b [innerHTML]="'client.ClientDescription' | translate"></b></small>
    </div>
</div>

<div class="card card-default">
    <div class="card-body">
        <a [routerLink]="[ '/clients' ]" class="btn btn-outline-primary">{{ 'general.goback' | translate }}</a>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>

<app-loading *ngIf="model == null || showButtonLoading"></app-loading>

<div class="card card-default">
    <div class="card-header">
        <h3>{{ client }}</h3>
    </div>
    <div class="card-body">

        <div class="form-horizontal">
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.clientId-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.clientId' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-id" placeholder="ClientId" [(ngModel)]="model.clientId" />
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.name-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.name' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-name" placeholder="Name" [(ngModel)]="model.clientName" />
                    </div>
                </div>
            </fieldset>
        
            <!--Input - text -->
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.description-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.description' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-description" [placeholder]="'client.details.description-tooltip' | translate"
                            [(ngModel)]="model.description" />
                    </div>
                </div>
            </fieldset>
        
            <!--Input - text -->
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.clientUri-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.clientUri' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-clientUri" [placeholder]="'client.details.clientUri-tooltip' | translate"
                            [(ngModel)]="model.clientUri" />
                    </div>
                </div>
            </fieldset>
        
            <!--Input - text -->
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.postLogoutRedirectUris-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.postLogoutRedirectUris' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-postLogoutRedirectUris" [placeholder]="'client.details.postLogoutRedirectUris-tooltip' | translate"
                            [(ngModel)]="model.postLogoutRedirectUris" />
                    </div>
                </div>
            </fieldset>

            <!--Input - text -->
            <fieldset>
                <div class="form-group row">
                    <label placement="top" [tooltip]="'client.details.logoUri-tooltip' | translate" class="col-xl-3 col-form-label">{{
                        'client.details.logoUri' | translate }} <i class="fa fa-comment-dots"></i></label>
                    <div class="col-xl-9">
                        <input class="form-control" autocomplete="client-logoUri" [placeholder]="'client.details.logoUri-tooltip' | translate"
                            [(ngModel)]="model.logoUri" />
                    </div>
                </div>
            </fieldset>
        </div>

        <div class="col-xl-12">
            <div class="row">
                <div class="col-md-4">
                    <!-- START card-->
                    <div class="card bg-primary pointer" (click)="selectClient(0)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">🗋</div>
                            <p>{{'general.empty' | translate }}</p>
                            <small>Default</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 0"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-4">
                    <!-- START card-->
                    <div class="card bg-info pointer" (click)="selectClient(1)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">🖥️</div>
                            <p>Web App - Server Side (MVC)</p>
                            <small>Implicity Flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 1"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-4">
                     <!-- START card-->
                     <div class="card bg-warning pointer" (click)="selectClient(2)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">🖥️️</div>
                            <p>Web App - Server Side (MVC)</p>
                            <small>Hybrid Flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 2"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                     <!-- START card-->
                     <div class="card bg-success pointer" (click)="selectClient(3)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">💻</div>
                            <p>SPA - Single Page Application (e.g Angular, Blazor)</p>
                            <small>Implicity Flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 3"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-4">
                    <!-- START card-->
                    <div class="card bg-purple pointer" (click)="selectClient(4)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0">📱</div>
                            <p>Native Application - Mobile / Desktop<br>&nbsp;</p>
                            <small>Hybrid Flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 4"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                <div class="col-md-4">
                     <!-- START card-->
                     <div class="card bg-yellow-dark pointer" (click)="selectClient(5)">
                        <div class="card-body text-center">
                            <div class="text-lg m-0"><i class="fa fa-server"></i></div>
                            <p>Server</p>
                            <small>Resource Owner Password & Client Credentials flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 5"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 offset-4">
                     <!-- START card-->
                     <div class="card bg-dark pointer" (click)="selectClient(6)">
                        <div class="card-body text-center text-light">
                            <div class="text-lg m-0">📺</div>
                            <p>Devices - TVs, gaming consoles, printers, cash registers, audio appliances etc</p>
                            <small>Device Flow</small>
                            <div class="mb-3"></div>
                            <button class="btn btn-oval btn-secondary text-success btn-xs" *ngIf="model.clientType == 6"><i class="fa fa-check"></i></button>
                        </div>
                    </div>
                    <!-- END card-->
                </div>
                
            </div>
            
        </div>

    </div>
    <div class="card-footer">
        <button class="mb-1 btn btn-primary" (click)="save()" type="button">Save</button>
        <a class="mb-1 btn btn-secondary" [routerLink]="['/clients']">Cancel</a>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>